import React from 'react'

import avatar from '../images/avatar.png'
// ================================B站列表渲染
class List extends React.Component{
  // 1:定义初始化数据(实际情况中是请求服务器数据)
  state={
    // hot: 热度排序  time: 时间排序
    // 条件渲染：切换后显示对应的列表数据
     tabs: [
      {
        id: 1,
        name: '热度',
        type: 'hot',
      },
      {
        id: 2,
        name: '时间',
        type: 'time',
      },
    ],
    // hot: 热度排序  time: 时间排序
    active: 'hot',
    // 评论列表
    list: [
      {
        id: 1,
        author: '刘德华',
        comment: '给我一杯忘情水',
        time: new Date('2021-10-10 09:09:00'),
        // 1: 点赞 0：无态度 -1:踩
        attitude: 1,
      },
      {
        id: 2,
        author: '周杰伦',
        comment: '哎哟，不错哦',
        time: new Date('2021-10-11 09:09:00'),
        // 1: 点赞 0：无态度 -1:踩
        attitude: 0,
      },
      {
        id: 3,
        author: '五月天',
        comment: '不打扰，是我的温柔',
        time: new Date('2021-10-11 10:09:00'),
        // 1: 点赞 0：无态度 -1:踩
        attitude: -1,
      },
    ],
  }
  render() {
    return(
      <div className="comment-root">
      <div className="comment-container">
        {/* 评论数 */}
        <div className="comment-number">
          <span>评论数:{this.state.list.length}</span>
        </div>

        {/* 排序tab */}
        <div className="tabs-order">
          {this.state.tabs.map((item) => {
            return (
              <div
                className={item.type === this.state.active ? 'on' : ''}
                key={item.id}
              >
                按{item.name}排序
              </div>
            );
          })}
        </div>

        {/* 发表评论区 */}
        <div className="comment-send-container">
          <div>
            <img className="user-head" src={avatar} alt="头像" />
          </div>
          <div className="comment-send">
            <div className="textarea-container">
              <textarea
                cols="80"
                rows="5"
                placeholder="发条友善的评论"
                className="ipt-txt"
              />
              <button className="comment-submit">发表评论</button>
            </div>
            <div className="comment-emoji">
              <i className="face"></i>
              <span className="text">表情</span>
            </div>
          </div>
        </div>

        {/* 评论列表区 */}
        <div className="comment-list">
          {this.state.list.map((item) => (
            <div className="comment-item" key={item.id}>
              <div>
                <img className="user-head" src={avatar} alt="头像" />
              </div>

              <div className="comment">
                <div className="user">{item.author}</div>
                <p className="text">{item.comment}</p>
                <div className="info">
                  <span className="time">
                    {item.time.toLocaleDateString() +
                      '/' +
                      item.time.toLocaleTimeString()}
                  </span>
                  <span
                    className={item.attitude === 1 ? 'like liked' : 'like'}
                    // className={`like ${item.attitude === 1 ? 'liked' : ''}`}
                  >
                    <i className="icon" />
                  </span>
                  <span
                    className={item.attitude === -1 ? 'hate hated' : 'hate'}
                  >
                    <i className="icon" />
                  </span>
                  <span className="btn-hover">删除</span>
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </div>
    )
  }
}
export default List
